<template>
    <div class="vue-table-container">
        <slot name="search">
            <div class="row form-horizontal">
                <div class="col-sm-12">
                    <div class="input-group">
                        <input-select class="input-sm form-control" v-model:value="queryString"
                                      v-on:keyup.enter="search"
                                        :options="dataLists"
                                      el-name="keyword"></input-select>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-sm btn-primary" @click="search">检索</button>
                        </span>
                    </div>
                </div>
            </div>
        </slot>
                <div class="col-sm-12">
                    <div class="row">
                    <div class="ibox float-e-margins">

                        <!--<slot name="search">-->
                        <!--<div class="row form-horizontal">-->
                        <!--<div class="col-sm-12">-->
                        <!--<div class="input-group">-->
                        <!--<input placeholder="请输入关键词" class="input-sm form-control" name="keyword" type="text"-->
                        <!--v-model="queryString" v-on:keyup.enter="search">-->
                        <!--<span class="input-group-btn">-->
                        <!--<button type="button" class="btn btn-sm btn-primary" @click="search">检索</button>-->
                        <!--</span>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</slot>-->
                        <div class="ibox-content inspinia-timeline" v-if="dataSource.items.length > 0">

                            <slot name="div" v-for="item in dataSource.items" :item="item"></slot>

                        </div>
                    </div>
                    </div>
        </div>
        <div class="widget-toolbox padding-10 clearfix">
            <pagination :page-count="dataSource.pageCount"
                        :total="dataSource.total"
                        :current-page="dataSource.currentPage" @goPage="goPage"></pagination>
        </div>
    </div>
</template>
<style scoped>

</style>
<script>
    export default {
        props: {
            dataSource: {
                type: Object,
                default: []
            },
            tableClass:{
                type: String,
                default: ''
            },
            titles:{
                type: String,
                default: ''
            },
            dataLists:{
                type: [Array, Object],
                default: []
            }
        },
        data: function () {
            return {
                queryString: ''
            }
        },
        methods: {
            search: function () {
                let self = this;
                self.dataSource.fetch({query: self.queryString});
            },
            goPage: function (event) {
                let self = this;
                self.dataSource.fetch({page: event.page, query: self.queryString});
            }
        }
    }
</script>
